In this CSS tutorial, we will be discussing the width and height properties. To put it simply height and width properties are used to control the height and width of the element content. In the previous tutorials, we have discussed the margin, padding and border properties which also affect the height and width of an element. But the height and width properties do not change or include any of these properties. The height and width property set the area of the element within the padding, border and margin.
Height and Width property values
Both height and width accept five types of values
| Values | Description |
| auto | The browser automatically manipulates the height and width of the element. |
| length | In length, we can use px, cm, etc. units to specify the height and width for an element. |
| % | It controls the dimension of the element according to the device display. |
| initial | It set a default value to height/width |
| inherit | It inherits the height and width value from the parent element. |
Note : It is highly recommended to use auto, % and inherit values to set the height and width of an element.
Note : If an element has padding, margin and border property along with height and width properties. Then the height and width properties mange the element area inside the padding, border and margin.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border: 2px solid red;
height: 20%;
width: 30%;
}
</style>
</head>
<body>
<p> It's a paragraph, its height and width are 20% and 30% of the display size </p>
</body>
</html>
Preview
It's a paragraph, its height and width are 20% and 30% of the display size.
Height and width subsidiary properties
Both height and width properties have two subsidiary properties min and max, which are used to set the minimum and maximum height and width to an element. As we know that every HTML element represents a rectangular box-like structure and the min and max properties manipulate the height and width of the element box.
| Properties | Description |
| max-height | It set the maximum height for an element in case if its content increase. |
| min-height | It set a minimum height to an element. |
| max-width | It set a maximum width to an element. |
| min-width | It set a minimum width to an element. |
Note : These max and min properties help in setting the element content box according to the browser or device display.
CSS max-height property
The max-height property set a maximum height value for an element box, and its value must be less than min-height property.
Note : If the element text content needs more space than the maximum height, then the text will leak from the element border.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border: 2px solid red;
padding: 20px;
max-height: 25px;
width: 150px;
}
</style>
</head>
<body>
<p> It's a paragraph, with max height 25px and 150px width</p>
</body>
</html>
Preview
It's a paragraph, its height and width are 20% and 30% of the display size.
CSS min-height property
The min-height property helps us to set a minimum height to an element. It accepts similar values as height property.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border: 2px solid red;
padding: 20px;
min-height: 25px;
width: 150px;
}
</style>
</head>
<body>
<p> It's a paragraph, with min height 25px and 150px width</p>
</body>
</html>
Preview
It's a paragraph, with min height 25px and 150px width
CSS max-width
The max-width property set a maximum width to an element. If we use the px or any other fix length value to set the max-width then the text content may leak from the element body.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border: 2px solid red;
padding: 20px;
height: 25%;
max-width: 40px;
}
</style>
</head>
<body>
<p> It's a paragraph, with height of 25% and 40px max width</p>
</body>
</html>
Preview
It's a paragraph, with height of 25% and 40px max width
CSS min-width
The min-width property set a minimum width to the element. If the component has an only min-width property with not max-width, then the max-width of the element will be adjected according to the display size.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border: 2px solid red;
padding: 20px;
height: 25%;
min-width: 40px;
}
</style>
</head>
<body>
<p> It's a paragraph, with height of 25% and 40px min width</p>
</body>
</html>
Preview
It's a paragraph, with height of 25% and 40px min width
CSS line-height Property
The line-height property is used to control or set the spacing between two lines of the same element. It can only use to increase or decrease the gap between two lines.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
border: 2px solid red;
padding: 20px;
height: 50%;
width: 50%;
line-height: 40px;
}
</style>
</head>
<body>
<p> It's a paragraph, with height of 50% and 50% width
It's a paragraph, with height of 50% and 50% width
It's a paragraph, with height of 50% and 50% width
It's a paragraph, with height of 50% and 50% width
</p>
</body>
</html>
Preview
It's a paragraph, with height of 50% and 50% width
It's a paragraph, with height of 50% and 50% width
It's a paragraph, with height of 50% and 50% width
It's a paragraph, with height of 50% and 50% width
Summary
- The CSS height and width properties define the height and width of element.
- height and width properties do not include margin, padding and border.
- If an element has margin, padding and border property, then the height and width properties will work inside it.
- The max-height, min-height, max-width and min-width are the subsidiary property of height and width properties.
- The line-height property defines the gap between lines.